import React, { Component } from 'react';
import { StyleSheet, Text, View } from "react-native";
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import { EchartsComponent } from '../product-price/EchartsComponent';
import { Common } from '../../../component/common/Common';

const scale = GLOBAL.SCALE;
const selectTypes = {
	first: [{
		value: '2018-08-01',
		id: '0'
	}, {
		value: '2018-08-02',
		id: '111111'
	}],
	two: [{
		value: '2018-08-01',
		id: '1'
	}, {
		value: '2018-08-02',
		id: '1'
	}]
}
export class CurrencyPriceDetail extends Component {
	static navigationOptions = ({ navigation, navigationOptions }) => {
		const { params } = navigation.state;
		return {
			headerTitle: params.title,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} />,
			headerTintColor: style.color.dark,
			headerStyle: style.headTow.headerStyleWidthBorder,
			headerTitleStyle: style.headTow.headerTitleStyle,
		}
	};

	constructor(props) {
		super(props);
		this.state = {
			pageStatus: {
				status: 'loading'
			},
			selectLeftValue: '2018-08-01',
			selectRightValue: '2018-08-01',
			checkedLeftIndex: 0,
			checkedRightIndex: 0
		}
	}

	componentWillMount () {
		const { data } = this.props.navigation.state.params;
		this._getProductPriceDetail({
			exchangeCny: data.exchangeCny,
			type: 4
		});
	}

	async _getProductPriceDetail (params) {
		let responseData = await HTTP.POST(API_GENERATE(API.EXCHANGE_PRICE_DETAIL), params);
		if (responseData) {
			this.setState({
				priceList: responseData,
				pageStatus: {
					status: 'data'
				}
			})
		} else {
			this.setState({
				pageStatus: {
					status: 'empty'
				}
			})
		}
	}

	_selectProductPrice (item, key, index) {
		const { selectItems, selectLeftValue, selectRightValue, checkedLeftIndex, checkedRightIndex } = this.state;
		const { data } = this.props.navigation.state.params;
		this.setState({
			showLeftSelectList: false,
			showRightSelectList: false,
			selectLeftValue: key === 'first' ? item.value : selectLeftValue,
			selectRightValue: key === 'two' ? item.value : selectRightValue,
			checkedLeftIndex: key === 'first' ? index : checkedLeftIndex,
			checkedRightIndex: key === 'two' ? index : checkedRightIndex
		})
		this._getProductPriceDetail(data);
	}

	render () {
		const { pageStatus, showSelectList, selectItems, selectLeftValue, selectRightValue, showLeftSelectList, showRightSelectList,
			checkedIndex, checkedLeftIndex, checkedRightIndex, priceList } = this.state;
		const { data } = this.props.navigation.state.params;
		let echartData = {};

		if (priceList) {
			let date = [];
			let leftData = [];
			let rightData = [];
			for (let i = 0; i < priceList.length; i++) {
				date.push(priceList[i].publishDate);
				leftData.push(priceList[i].exchangePrice);   //现汇买入价
				rightData.push(priceList[i].pbocPrice);  //现钞买入
			}
			echartData.date = date;
			echartData.leftData = leftData;
			echartData.rightData = rightData;
		}

		return (
			<View style={styles.container}>
				{
					pageStatus.status === 'data' ? (
						<View>
							{/* <View style={styles.selectTypes}>
								<CommonSelect
									data={selectTypes.product}
									value={selectLeftValue}
									ifPullDown={showLeftSelectList}
									checkSelect={() => {
										this.setState({
											selectItems: {
												value: selectTypes.first,
												key: 'first'
											},
											showLeftSelectList: !showLeftSelectList,
											showRightSelectList: false
										})
									}} />
								<Text style={{ color: style.color.normal }}>至</Text>
								<CommonSelect
									data={selectTypes.time}
									value={selectRightValue}
									ifPullDown={showRightSelectList}
									checkSelect={() => {
										this.setState({
											selectItems: {
												value: selectTypes.two,
												key: 'two'
											},
											showLeftSelectList: false,
											showRightSelectList: !showRightSelectList
										})
									}} />
							</View>
							{
								showLeftSelectList || showRightSelectList ?
									<CommonSelectList
										checkedIndex={selectItems.key === 'first' ? checkedLeftIndex : checkedRightIndex}
										data={selectItems}
										checkItem={(item, key, index) => { this._selectProductPrice(item, key, index) }}
										allClick={() => {
											this.setState({
												showLeftSelectList: false,
												showRightSelectList: false
											})
										}} />
									: null
							} */}
							<EchartsComponent
								data={echartData}
								setType={(type) => { this._getProductPriceDetail({ exchangeCny: data.exchangeCny, type: type }); }} />

							<View style={styles.echartLabelCont}>
								<View style={styles.echartLabel}>
									<View style={[styles.echartLabelCircle, { backgroundColor: '#2F7BFF' }]}></View>
									<Text style={[styles.echartLabelText, { color: '#2F7BFF' }]}>现汇买入价</Text>
								</View>
								<View style={styles.echartLabel}>
									<View style={[styles.echartLabelCircle, { backgroundColor: '#EE5D5D' }]}></View>
									<Text style={[styles.echartLabelText, { color: '#EE5D5D' }]}>现钞买入价</Text>
								</View>
							</View>
						</View>
					) : (<PageStatusIndex {...pageStatus} />)
				}
			</View>
		)
	}

}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#fff',
	},
	selectTypes: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
	},
	echartLabelCont: {
		flexDirection: 'row',
		marginLeft: 42 * scale,
		marginRight: 42 * scale,
	},
	echartLabel: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
	},
	echartLabelCircle: {
		width: 8 * scale,
		height: 8 * scale,
		borderRadius: 4 * scale,
	},
	echartLabelText: {
		fontSize: 12 * scale,
		marginLeft: 8 * scale
	}
})